<template>
	<view class="box">
		<view class="hezi">
			<view class="hezi_flex">
				<view class="tianjia" @click="add">
					<image src="/static/tj.png" mode=""></image> <span>添加工作记录</span>
				</view>
			</view>
			<view class="" v-for="(item,index) in listdata.itemDateWorkList" :key='index'>
				<view class="riqi" v-if="listdata.workType == 2 && index <= 0">
					<view class="left">
						日期
					</view>
					<view class="r">
						<picker mode="date" @change="changetime" :value="listdata.workDate"  range-key="title">
							<view :class="listdata.workDate ? '' : 'huise'">
								{{ listdata.workDate  ? listdata.workDate : '请选择工作日期>' }}
							</view>
						</picker>
					</view>
				</view>
				<view class="work_flex">
					<view class="gongzuo">
						工作{{index+1}}
					</view>
					<view class="ts" @click="deletework(item)" v-if="index >= 1">
						<uni-icons type="trash" color="#90A1BC"></uni-icons>
						删除
					</view>
					
				</view>
				<view class="neir" >
					<view class="neir_box">
						<view class="left">
							<text>项目名称</text>
						</view>
						<view class="left r">
							<input @input='changinput($event,item,index)' placeholder-class="placeholder_class" type="text"
								v-model="item.itemName" placeholder="请输入项目名称" focus />
						</view>
						<view class="posa" v-show="item.isno">
							<view class="items" v-for="(is,ix) in cityList" :key="ix" @click="getcityitem(is,item,index)">
								<view class="">
									{{is.itemName}}
								</view>
							</view>
						</view>
					</view>
					<view class="" v-if="username == 'cehui'">
						<view class="neir_box">
							<view class="left">
								<text>工作单位</text>
							</view>
								<picker @click="gos(item)" :disabled="isdisable"  class="r" @change="changeunit($event,item,index)" @cancel='cancel' :value="item.isnum"
									:range="item.unitList" range-key="name">
									<view class="uni-input">{{ item.unitName == '' ? '选择单位' : item.unitList[item.isnum].name }}</view>
								</picker>
						</view>
						<view class="neir_box">
							<view class="left">
								<text>工作量</text>
							</view>
							<view class="left r">
								<input type="text" placeholder-class="placeholder_class" v-model="item.workCount"
									placeholder="请输入数值" />
							</view>
						</view>
					</view>

				
					<view class="neir_box">
						<view class="left">
							<text>工时</text>
						</view>
						<view class="left r">
							<input type="text" placeholder-class="placeholder_class" v-model="item.workTime"
								placeholder="请输入数值" />
						</view>
					</view>
					<view class="beizhu">
						<view class="beizhu_left">
							<text>工作内容 </text>
							<span>(必填)</span>
						</view>
						<view class="textarea">
							<textarea placeholder-class="placeholder_class" placeholder="请输入工作内容"
								v-model="item.workContent"></textarea>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="" style="height: 220rpx;">

		</view>
		<view class="dibu">
			<span>注意事项：填写的项目的总工时，必须等于1。</span>
			<button @click="submint">提交保存</button>
		</view>
	</view>
</template>

<script>
	import {
		getxList,addwork
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				username:uni.getStorageSync('name'),
				cityList: [],
				listdata: {
					workType: 1,
					workDate: "",
					itemDateWorkList: [
						{
							itemId: '',
							itemName: '',
							unitId: '',
							unitName: '',
							unitPrice:'',
							workCount: '',
							workTime: '',
							workContent: '',
							isno:true,
							isnum:0
						},
					]
				},
				unitList: [],
				colorIndex: 0,
				isdisable:true,
			}
		},
		onLoad(query) {
			if(query.item){
				const da = JSON.parse(decodeURIComponent(query.item));
				this.listdata.itemDateWorkList[0].itemId = da.id
				this.listdata.itemDateWorkList[0].itemName = da.itemName
				this.listdata.itemDateWorkList[0].unitList = JSON.parse(da.workUnit)
			}
			this.listdata.itemDateWorkList[0].isno = false
			this.isdisable = false
			this.listdata.workType = query.workType
			if(query.workType == 2){
				uni.setNavigationBarTitle({
					title: '补录工作'
				})
			}else{
				uni.setNavigationBarTitle({
					title: '录入工作'
				})
			}
		},
		methods: {
			changetime(e){
				this.listdata.workDate  = e.detail.value
			},
			getcityitem(i,item,index) {
				this.listdata.itemDateWorkList[index].itemId = i.id
				this.listdata.itemDateWorkList[index].itemName = i.itemName
				this.listdata.itemDateWorkList[index].unitList = JSON.parse(i.workUnit)
				item.isno = false
				this.isdisable = false
			},
			throttle: function(fn, delay) {
				clearTimeout(fn);
				fn = setTimeout(function() {}, delay);
			},
			queryData(value,item) {
				item.isno = true
				getxList({
					itemName: value,
					itemStatus:2
				}).then(res => {
					if (res.code == 200) {
						this.cityList = res.rows
					}
				})
			},
			changinput(e,item,index) {
				let keyWord = e.detail.value
				if (this.listdata.itemDateWorkList[index].itemName != '') {
					this.throttle(this.queryData(keyWord,item), 1000);
				} else {
					item.isno = false
				}
			},

			cancel(e) {
				console.log(e);
			},
			changeunit(e,item,index) {
				item.isnum = e.detail.value
				this.listdata.itemDateWorkList[index].unitId = item.unitList[e.detail.value].id;
				this.listdata.itemDateWorkList[index].unitName = item.unitList[e.detail.value].name;
				this.listdata.itemDateWorkList[index].unitPrice = item.unitList[e.detail.value].price;
			},
			deletework(item){
				let index = this.listdata.itemDateWorkList.indexOf(item);
					if (index !== -1) {
				      this.listdata.itemDateWorkList.splice(index, 1);
				}
			},
			submint() {
				addwork(this.listdata).then(res=>{
					if(res.code == 200){
						if(this.listdata.workType == 1){
							uni.navigateTo({
								url:'/pages/index/record'
							})
						}else{
							uni.navigateTo({
								url:'/pages/index/examine'
							})
						}
						
					}
				})
			},
			add() {
				this.listdata.itemDateWorkList.push({
					itemId: '',
					itemName: '',
					unitId: '',
					unitName: '',
					unitPrice:'',
					workCount: '',
					workTime: '',
					workContent: ''
				})
				this.colorIndex = 0
			},
			gos(item) {
				console.log(item);
				if (item.itemName == '') {
					uni.showToast({
						title: '请输入项目名称',
						duration: 2000,
						mask: false,
						icon: "none"
					})
					this.isdisable = true
				}else{
					this.isdisable = false
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.work_flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.ts{
			font-family: PingFang SC;
			font-size: 26rpx;
			color: #90A1BC;
			line-height: 36rpx;
		}
	}
	.riqi{
		width: 670rpx;
		border-radius: 20rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14rpx 20rpx;
		margin-top: 50rpx;
	}
	.tianjia {
		display: flex;
		align-items: center;
		image {
			width: 40rpx;
			height: 40rpx;
		}

		span {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 28rpx;
			color: #065CF7;
		}
	}

	.huise {
		color: #C4C4C4;
	}

	.uni-combox__no-border {
		padding: 0 !important;
	}


	.left {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1F1F1F;

	}

	.beizhu {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #1F1F1F;

		.beizhu_left {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
		}

		span {
			color: #C4C4C4;
		}
	}

	/deep/ .placeholder_class {
		color: #C4C4C4;
	}

	.textarea {
		background-color: #f5f5f5;
		padding: 20rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;

		textarea {
			width: 100%;
			height: 100%;
			font-size: 28rpx;
			color: #333;
		}
	}

	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.r {
		margin-left: 20rpx;
		flex: 1;
		width: 1rpx;
		text-align: right;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;

		input {
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 28rpx;
		}


	}

	.dibu {
		width: 100%;
		position: fixed;
		bottom: 0%;
		height: 160rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;
		z-index: 99;

		span {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FF6D01;
			line-height: 36rpx;
			margin-left: 30rpx;
		}

		button {
			margin-top: 20rpx;
			width: 710rpx;
			height: 80rpx;
			background: #065CF7;
			border-radius: 44rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}




	.hezi {
		width: 710rpx;
		border-radius: 20rpx;
		margin: 20rpx auto;
		.hezi_flex {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10rpx;
			position: absolute;
			right: 20rpx;
		}

		.gongzuo {
			font-family: PingFang SC;
			font-weight: 800;
			font-size: 24rpx;
			color: #90A1BC;
			line-height: 36rpx;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			display: inline-block;
			margin-left: 10rpx;
		}

		.neir {
			width: 710rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.neir_box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				position: relative;

				.posa {
					position: absolute;
					width: 100%;
					top: 60rpx;
					background-color: #FFFFFF;
					z-index: 999;
					border-radius: 8rpx;
					box-shadow: 0rpx -8rpx 10rpx 0rpx rgba(233, 233, 233, 0.49);

					.items {
						text-align: center;
						border-bottom: 1px solid #E5E5E5;
						padding: 20rpx;
						font-weight: normal;
						font-size: 30rpx;
						color: #2B2B2B
					}
				}
			}
		}
	}

	image {
		width: 45rpx;
		height: 45rpx;
	}



	.pop {
		width: 100%;
		background-color: #fff;
		height: 500rpx;

		.pop_flex {
			display: flex;
			justify-content: space-between;
			padding: 30rpx;

			.ts {
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #2B2B2B;
			}
		}

		.text {
			text-align: center;
		}

		.btb {
			width: 100%;
			position: fixed;
			bottom: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom) !important;
			/*兼容 IOS<11.2*/
			padding-bottom: env(safe-area-inset-bottom) !important;

			/*兼容 IOS>11.2*/
			.btn {
				width: 700rpx;
				height: 80rpx;
				background: #065CF7;
				border-radius: 40rpx;
				margin: 0 auto;
				text-align: center;
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				font-weight: bold;
			}
		}

	}
</style>